<template>
  <div class="app-container">
    <div class="flex">
      <div class="flex_box">
        <p class="text">投资者</p>
        <el-input
          type="number"
          v-model.number="config[0]"
          class="input"
          min="0"
          max="100"
          :disabled="!updateStatus"
        ></el-input>
        <p class="unit">%</p>
      </div>
    </div>
    <div class="flex">
      <div class="flex_box">
        <p class="text">店长</p>
        <el-input
          type="number"
          v-model="config[1][0]"
          class="input"
          min="0"
          max="100"
          :disabled="!updateStatus"
        ></el-input>
        <p class="unit">%</p>
      </div>
      <div class="flex_box">
        <p class="text">投资者</p>
        <el-input
          type="number"
          v-model="config[1][1]"
          class="input"
          min="0"
          max="100"
          :disabled="!updateStatus"
        ></el-input>
        <p class="unit">%</p>
      </div>
    </div>
    <div class="flex">
      <div class="flex_box">
        <p class="text">员工</p>
        <el-input
          type="number"
          v-model="config[2][0]"
          class="input"
          min="0"
          max="100"
          :disabled="!updateStatus"
        ></el-input>
        <p class="unit">%</p>
      </div>
      <div class="flex_box">
        <p class="text">店长</p>
        <el-input
          type="number"
          v-model="config[2][1]"
          class="input"
          min="0"
          max="100"
          :disabled="!updateStatus"
        ></el-input>
        <p class="unit">%</p>
      </div>
      <div class="flex_box">
        <p class="text">投资者</p>
        <el-input
          type="number"
          v-model="config[2][2]"
          class="input"
          min="0"
          max="100"
          :disabled="!updateStatus"
        ></el-input>
        <p class="unit">%</p>
      </div>
    </div>
    <template v-if="updateStatus">
      <el-button type="" class="btn" @click="updateStatus = false"
        >取消</el-button
      >
      <el-button type="primary" class="btn" @click="submitConfig"
        >确认修改</el-button
      >
    </template>
    <el-button
      v-if="updateMenu && !updateStatus"
      type="primary"
      class="btn"
      @click="updateStatus = true"
      >修改</el-button
    >
  </div>
</template>

<script>
import { getSystemConfig, updateSystemConfig } from "@/api/index";
import { mapGetters } from "vuex";
export default {
  name: "ScaleManage",
  computed: {
    ...mapGetters(["menuIds"]),
    updateMenu() {
      return this.menuIds.includes("4012");
    },
  },
  data() {
    return {
      config: ["", "", ""],
      updateStatus: false,
    };
  },
  created() {
    this.getConfig();
  },
  methods: {
    getConfig() {
      getSystemConfig({ key: "PROFIT_RATE" }).then((res) => {
        if (res.data) {
          const [investor, manager, employee] = res.data.split(",");
          this.config = [
            Number(investor),
            manager ? manager.split("/") : [],
            employee ? employee.split("/") : [],
          ];
        }
      });
    },
    submitConfig() {
      this.$modal
        .confirm("确认执行该操作吗？")
        .then(() => {
          const configString =
            this.config[0] +
            "," +
            this.config[1].join("/") +
            "," +
            this.config[2].join("/");
          console.log(configString);
          return updateSystemConfig({
            key: "PROFIT_RATE",
            val: configString,
          });
        })
        .then(() => {
          this.updateStatus = false;
          this.$modal.msgSuccess("操作成功");
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
}
.flex_box {
  display: flex;
  align-items: center;
}
.text {
  width: 100px;
  text-align: right;
}
.input {
  margin: 0 10px;
}
.btn {
  margin-top: 20px;
}
</style>
